<template>
	<view style="width: 100%;">
		<view class="u-page">
			<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>
			<u-row customStyle="margin: 10px">
				<u-col span="12">
					<!-- <text class="mypage-title">设备信息查询</text> -->
					<uni-icons @click="handel_plus_click" style="text-align: right;" type="plus" size="30"></uni-icons>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="12">
					<u-search style="z-index: 999;" :disabled='true' bgColor="rgb(255 255 255)" placeholder="搜索"
						shape="round" @click="handle_SearchBox_click" :showAction="false" :animation="true"></u-search>
				</u-col>
			</u-row>
			<u-popup :show="show" @close="close" @open="open">
				<view style="width: 93%;align-self: center;">
					<u--form labelWidth='auto' labelPosition="left" :model="queryParamsForm" :rules="rules" ref="form1">
						<u-form-item label="申请人姓名" prop="applyName" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParams.applyName">
							</u--input>
						</u-form-item>
						<u-form-item label="申请人身份证号码" prop="applyIdno" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParams.applyIdno">
							</u--input>
						</u-form-item>
						<!-- 	<u-form-item label="性别" prop="sex" borderBottom ref="item1">
							<u--input inputAlign='center' shape='square' border="none" v-model="queryParamsForm.sex">
							</u--input>
						</u-form-item> -->
					</u--form>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_search_click">搜索
							</u-button>
						</u-col>
					</u-row>
					<u-row customStyle="margin:10px">
						<u-col span="12">
							<u-button class="custom-style" type="primary" size="small" @click="handel_reset_click">重置
							</u-button>
						</u-col>
					</u-row>
				</view>
			</u-popup>
			<u-row customStyle="margin-bottom: 10px ">
				<u-col span="12">
					<!-- 					<vue-loadmore :on-loadmore="MyonLoad" :finished="finished">
						<u-empty v-if="DataList.length==0" mode="list"></u-empty>
						<u-cell-group customStyle='background-color: white;' v-else>
							<u-cell v-for="(item, index) in DataList" size="large" isLink clickable
								:title="getItemTitle(item)" :label="getItemLabel(item)" :name=item.id
								@click="handel_cell_click">
							</u-cell>
						</u-cell-group>
					</vue-loadmore> -->

					<u-empty v-if="DataList.length==0" mode="list"></u-empty>
					<u-cell-group customStyle='background-color: white;' v-else>
						<!-- <u-cell v-for="(item, index) in DataList" size="large" isLink clickable
							:title="getItemTitle(item)" :label="getItemLabel(item)" :name=item.id
							@click="handel_cell_click">
						</u-cell> -->
						<u-cell v-for="(item, index) in DataList" size="large" isLink clickable
							:title="getItemTitle(item)" :label="getItemLabel(item)" :name=item.id
							@click="handel_cell_click">
						</u-cell>
					</u-cell-group>
					<uni-load-more :status="status" :contentText="loadText" @clickLoadMore="MyonLoad" />
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	//该页负责：
	//1.获取改造审核信息列表，下拉继续加载
	//2.提供条件搜索选项
	//3.点击单个改造审核信息跳转到改造审核详情
	//4.新增录入改造审核信息
	import {
		transformPostBody,
		transformRequestURL
	} from "@/utils/requestParams.js";

	import {
		QueryGzAuditList,
		addGzAudit,
		updateGzAudit,
		getGzAudit,
		delGzAudit,
		QueryGzAuditHistory
	} from "@/api/elder/GzAudit.js";

	export default {
		name: "index",
		components: {},
		data() {
			return {
				DataList: [],
				total: 0, //条目总数，用户加载更多
				// url参数
				queryParams: {
					pageNum: 1,
					pageSize: 20, //每次加载更多数据量
					applyName: undefined,
					applyIdno: undefined,
					startAge: undefined,
					endAge: undefined,
					areaCode: undefined,
				},
				// 表单查询参数
				queryParamsForm: {
					id: undefined,
					applyIdno: undefined,
					//applyName: undefined,
					applySex: undefined,
					// currentState: undefined,
					// selfCareAbility: undefined,
					// urbanRural: undefined,
					// capabilityAssess: undefined,
					// livingStatus: undefined,
					// pensionMode: undefined,
					// childStatus: undefined,
					//areaCode: undefined,
					//permanentResidence: undefined,
					//phone: undefined,
					//socialSecurityNumber: undefined,
					//personLevel: undefined,
					//age: undefined,
					//birthday: undefined,
				},
				rules: {},
				loading: false, //加载中提示框显示
				show: false, //搜索框显示
				finished: false, //加载更多完结
				status: 'more', // 显示底部提示
				loadText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载",
					contentnomore: "没有更多数据了",
				},
			}
		},
		watch: {},
		computed: {
			// showLoadmore() {
			// 	return this.list.length > 0
			// },
		},
		methods: {
			//条件搜索框
			handle_SearchBox_click() {
				this.show = true
			},
			open() {},
			close() {
				this.show = false
			},
			// MyonLoad(done) {
			// 	console.log('MyonLoad', this.DataList.length, this.total)
			// 	if (this.DataList.length < this.total) {
			// 		this.fetch();
			// 	} else {
			// 		// all data loaded
			// 		this.finished = true;
			// 	}
			// 	done();
			// },
			MyonLoad(e) {
				this.status = 'loading';
				console.log('MyonLoad', this.DataList.length, this.total);
				if (this.DataList.length < this.total) {
					this.fetch();
					this.status = 'more';
				} else {
					// all data loaded
					this.finished = true;
					this.status = 'nomore';
				}
				e.detail = {
					status: 'loading'
				};
				return e;
			},
			//条件搜索按钮点击
			handel_search_click() {
				this.finished = false; //重置搜索完结
				this.queryParams.pageNum = 1; //重置搜索页
				this.DataList = [] //清空原结果集
				this.getList();
				this.show = false; //关闭搜索框
			},
			//条件重置按钮点击
			handel_reset_click() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 15, //每次加载更多数据量
					applyIdno: undefined,
					applyname: undefined,
					startAge: undefined,
					endAge: undefined,
					areaCode: undefined,
				};
				this.queryParamsForm = {
					applyIdno: undefined,
					applyname: undefined,
					applySex: undefined,
					// currentState: undefined,
					// selfCareAbility: undefined,
					// urbanRural: undefined,
					// capabilityAssess: undefined,
					// livingStatus: undefined,
					// pensionMode: undefined,
					// childStatus: undefined,
					//areaCode: undefined,
					//permanentResidence: undefined,
					//phone: undefined,
					//socialSecurityNumber: undefined,
					//personLevel: undefined,
					//age: undefined,
					//birthday: undefined,
				}
				this.handel_search_click();
			},
			//跳转新增页
			handel_plus_click() {
				this.$tab.navigateTo('/pages/GzAudit/add')
			},
			//跳转详情页
			handel_cell_click(id) {
				//this.$tab.navigateTo('/pages/GzAudit/detail?id=' + id.name)
				console.log("id:" + id.name);
				this.$tab.navigateTo('/pages/GzAudit/detail?id=' + id.name)
			},
			//加载更多合并结果
			fetch() {
				this.queryParams.pageNum = this.queryParams.pageNum + 1; //加载下一页
				QueryGzAuditList(
					transformRequestURL(this.queryParams),
					transformPostBody(this.queryParamsForm)
				).then((response) => {
					console.log('response concat', response)
					this.DataList = this.DataList.concat(response.rows);
					this.total = response.total;
				});
			},
			//获取改造审核信息列表
			getList() {
				this.loading = true;
				QueryGzAuditList(
					transformRequestURL(this.queryParams),
					transformPostBody(this.queryParamsForm)
				).then((response) => {
					this.loading = false;
					console.log('response GzAuditList', response)
					this.DataList = response.rows;
					this.total = response.total;
				});
			},
			//获取改造审核信息简介
			getItemTitle(item) {
				let result = "";
				//console.log("item"+item.id);
				console.log("item:" + item.id);
				//  "name": "薛荣珍",
				//     "sex": "女",
				//     "age": "87",
				if (item.applyNo) result += item.applyNo + ' '
				if (item.applyTime) result += item.applyTime + ' ' + "\n"
				if (item.applyName) result += item.applyName + ' '
				if (item.applySex) result += item.applySex + ' '

				if (item.approveResult) result += item.approveResult
				return result
			},
			//获取住址
			// "permanentProvince": "山西省",
			// "permanentCity": "XX市",
			// "permanentDistrict": "离石区",
			// "permanentTown": "",
			// "permanentVillage": "城东社区",
			// "permanentStreet": "滨河街道",
			// "permanentResidenceAdd": "滨河佳苑后散户5排4院",
			getItemLabel(item) {
				let result = "";
				//if (item.permanentProvince) result += item.permanentProvince
				//if (item.permanentCity) result += item.permanentCity
				if (item.permanentDistrict) result += item.permanentDistrict
				// if (item.permanentTown) result += item.permanentTown
				if (item.permanentStreet) result += item.permanentStreet
				if (item.permanentVillage) result += item.permanentVillage
				if (item.permanentResidenceAdd) result += item.permanentResidenceAdd
				return result
			}
		},

	}
</script>

<style scoped>
	.demo-uni-row {
		margin-bottom: 10px;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
	}

	/* 支付宝小程序没有 demo-uni-row 层级 */
	/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
	/* #ifdef MP-ALIPAY || MP-WEIXIN */
	/deep/ .uni-row {
		margin-bottom: 10px;
	}

	/* #endif */

	.demo-uni-col {
		height: 36px;
		border-radius: 4px;
	}


	.mypage-title {
		font-size: 20px;
		font-weight: 600;
		align-self: center;
	}

	.wrap {
		padding: 12px;
	}

	.demo-layout {
		height: 25px;
		border-radius: 4px;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
	}

	.custom-style {
		width: 90%;
		font-weight: bolder;
		font-size: 15px;
	}
</style>